<template>
	<view class="p-b-60">
		<u-sticky>
			<view class="index-bg">
				<u-navbar  title="跟车情况" :background="background" title-color="#fff" back-icon-color="#fff"></u-navbar>
			</view>
		</u-sticky>
		
		<view class="index-top bold text-center m-b-30 xs">
			为了保障跟车人员的人身安全，货箱不得载客，且不得超过承运车 辆核载人数 
		</view>
		<view class="p-l-30 p-r-30 index-center">
			<view class="bg-white p-t-55 br20 p-r-24 p-l-24 p-b-44 m-b-60">
				<view class="bold primary text-center md m-b-40">
					您是否会安排人员跟车？
				</view>
				<view 
				class="text-center  bold m-b-25  br20 md" 
				:class="active==index?'follow-active':'follow-item'" 
				v-for="(item,index) in followList"
				@click="selectFollow(index)"
				>
					{{item.name}}
				</view>
				<view class=" text-center flex row-center" @click="sureFollow">
					<view class="follow-btn white br60 bold">
						确定
					</view>
				</view>
			</view>
			<view class="index-bottom">
				<view class="flex m-b-24">
					<view class="bottom-flag"></view>
					<view class="bold m-l-10 nr">温馨提示</view>
				</view>
				<view class="bg-white p-24 br20">
					<view class="bottom-text bold br20">
						跟车可能导致人员伤亡等严重后果，
						省省作为专业货运平台，对人身安全的保障能力有限，
						强烈建议您请勿跟车。如您坚持选择跟车的，
						省省将会在有限能力范围内提供相应的安全保护措施
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				followList:[
					{
						name:'不跟车',
						value:0,
						id:1
					},
					{
						name:'1人跟车',
						value:1,
						id:2
					},
					{
						name:'2人跟车',
						value:2,
						id:3
					}
				],
				active:0,
				background:{
					background:'background-image:url();'
				}
			}
		},
		onLoad(option) {
			this.active = option.value;
		},
		methods: {
			selectFollow(index){
				this.active = index;
			},
			sureFollow(){
				let value =  this.followList[this.active].value;
				
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				console.log(beforePage)
				if(value==0){
					beforePage.$vm.is_passenger = value;
					beforePage.$vm.passenger_num = value;
				}
				else{
					beforePage.$vm.is_passenger = Boolean(value);
					beforePage.$vm.passenger_num = value;
				}
				uni.navigateBack({
					
				})
				
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-bg {
		background-image:url();
		background-size: 100% auto;
		background-repeat: no-repeat;
	}
	.index-top{
		background-color: #f9e4e4;
		color: $-color-primary;
		padding: 25rpx 27rpx;
	}
	.index-center{
		box-shadow: 0upx 10upx 10upx 0upx #ededed;
		.follow-item{
			background-color: #f3f4f5;
			padding: 42rpx 0;
		}
		.follow-active{
			border: 1upx solid #e64c2a;
			// background:url(../../static/follow_icon.jpg) no-repeat  ;
			background-size:55rpx 55rpx;
			background-position: 100.5% 100.5%;
			overflow: hidden;
			padding: 41rpx 0;
			color: #df563b;
		}
		.follow-btn{
			width: 452rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: linear-gradient(#e36e51  , #df563b);
			box-shadow: 0upx 10upx 10upx 0upx #f7d4cd;
		}
	}
	.index-bottom{
		box-shadow: 0upx 10upx 10upx 0upx #ededed;
		.bottom-flag{
			width: 5rpx;
			background-color: #df563b;
			border-radius: 10upx;
			height: 26rpx;
		}
		.bottom-text{
			background-color: #f3f4f5;
			color: #ff3f3f;
			padding: 46rpx 32rpx;
		}
	}
</style>
